<!--
 * @Author: xiuquanxu
 * @Company: kaochong
 * @Date: 2021-01-11 11:17:25
 * @LastEditors: xiuquanxu
 * @LastEditTime: 2021-01-11 11:21:21
-->
<html>
    <meta charset="utf-8">
    <body>
        <canvas id="the-canvas" width="400px" height="600px"></canvas>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js" integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ==" crossorigin="anonymous"></script>
    <script>
        var loadingTask = pdfjsLib.getDocument('https://klcs01.kaochong.com/courseware/caebe2856d7b48631c7a876c7fa70378/1.pdf');
        loadingTask.promise.then(function(pdf) {
            pdf.getPage(1).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport({ scale: scale, });

                var canvas = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                canvasContext: context,
                viewport: viewport
                };
                page.render(renderContext);
            });
        });
    </script>
</html>